<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <!--
    对于插槽的理解:
        当我们自己定义了 标签组件, 在 自定义标签组件 中的文本内容在 自定义标签的指定位置显示出来
-->
    <div id="app">
        <lk-box>
            <button>插槽替换</button>
        </lk-box>

        <lk-box>
            <input type="text" placeholder="输入内容" />
            <br>
            <input type="text" placeholder="输入内容" />
        </lk-box>

        <lk-box>
            <img src="" alt="">
        </lk-box>
    </div>

    <template id="box">
        <div style="background-color: #846f74; width: 400px; height: 200px;margin-top: 20px">
            <h2>Box</h2>
            <p>子组件 Box</p>
            <slot>默认内容</slot>
        </div>
    </template>
</body>
<script src="js/vue.js"></script>
<script>

    const lkBox = {
        setup(props, context) {
            const { h } = Vue;  // h 用来创建 dom 元素
            const { attrs, slots, emit } = context;
            // console.log(slots);     // 这里输出的是 default
            // 可以获取到制定的插槽中的内容
            // 使用 slots.default() 时，一定要判断下插槽中有没有内容，没有内容这里会报错
            console.log(slots.default());

            console.log(slots.default()[0].props);  // 可以获取到插槽内容的属性 

            // 这里使用 return ()=> h(), 要与 template 属性区分开
            return () => h('div',   // 使用 div 包裹下面的插槽元素
                { style: "background-color: #846f74; width: 400px; height: 200px;margin-top: 20px" },
                [slots.default()]);
        },
        // template: `#box`,
    };

    const app = Vue.createApp({
        data() {
            return {
                "msg": "aaa"
            }
        },
        components: {
            "lk-box": lkBox
        }
    }).mount("#app");
</script>

</html>